<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>元数据管理</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}" media="screen"/>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" media="all"/>
    <style>
        .small-input {
            width: 350px;
            height: 30px;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-panel" style="background: #e9e9e96b;">
        <div class="layui-row">
            <div class="layui-col-xs3">
                <div class="layui-panel" style="padding: 4px;">
                    <div class="layui-input-group">
                        <input type="text" placeholder="search..." class="layui-input small-input" id="searchInput">
                        <div class="layui-input-suffix">
                            <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重置</button>
                        </div>
                    </div>
                    <div id="div-tree" style="height:650px;overflow-y:auto;font-size: 15px;"></div>
                </div>
            </div>
            <div class="layui-col-xs9">
                <div class="layui-card">
                    <div class="layui-card-header">数据库信息</div>
                    <div class="layui-card-body">
                        <div id="view1">无数据...</div>
                    </div>
                </div>
                <div class="layui-card" id="showView2" style="display:none;">
                    <div class="layui-card-header">数据表信息</div>
                    <div class="layui-card-body">
                        <div id="view2">无数据...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script th:src="@{/static/layui.js}"></script>
<script th:src="@{/static/base64.min.js}"></script>
<script th:replace="~{base::ctx}"/>
<script id="DataBaseView" type="text/html">
    <table class="layui-table">
        <colgroup>
            <col width="80">
            <col width="220">
            <col width="80">
            <col width="220">
            <col width="80">
            <col width="220">
            <col width="80">
            <col width="220">
        </colgroup>
        <tbody>
        <tr>
            <td><b>数据源</b></td>
            <td>{{= d.dataSourceKey}}</td>
            <td><b>名称</b></td>
            <td>{{= d.databaseName}}</td>
            <td><b>类型</b></td>
            <td>{{= d.productName}}</td>
            <td><b>版本</b></td>
            <td>{{= d.productVersion}}</td>
        </tr>
        <tr>
            <td><b>驱动名</b></td>
            <td>{{= d.driverName}}</td>
            <td><b>只读</b></td>
            <td>{{= d.readOnly}}</td>
            <td><b>事务</b></td>
            <td>{{= d.supportsTransactions}}</td>
            <td><b>表数量</b></td>
            <td>{{= d.tableCount}}</td>
        </tr>
        </tbody>
    </table>
</script>
<!-- 与tableSqlPageMeta对应. -->
<script id="tableView" type="text/html">
    <table class="layui-table">
        <colgroup>
            <col width="80">
            <col width="220">
            <col width="80">
            <col width="300">
            <col width="80">
            <col width="100">
        </colgroup>
        <tbody>
        <tr>
            <td><b>表名称</b></td>
            <td>{{= d.tableName}}</td>
            <td><b>表注释</b></td>
            <td>{{= d.tableComment}}</td>
            <td><b>字段数量</b></td>
            <td>{{= d.fieldCount}}</td>
        </tr>
        </tbody>
    </table>
    <hr class="layui-border-green">
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="200">
            <col width="200">
            <col width="200">
            <col width="200">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>字段名称</th>
            <th>字段注释</th>
            <th>字段类型</th>
            <th>是否NULL</th>
            <th>是否自增</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.tablesMetaList, function(index, item){ }}
        <tr>
            <td>{{= item.columnName }}</td>
            <td>{{= item.comment || '' }}</td>
            <td>{{= item.typeName }}</td>
            <td>{{= item.nullable }}</td>
            <td>{{= item.autoIncrement }}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
    <hr class="layui-border-green">
    <!-- 索引描述 -->
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="200">
            <col width="200">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>索引名称</th>
            <th>索引字段</th>
            <th>是否唯一</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.tablesIndexMetaList, function(index, item){ }}
        <tr>
            <td>{{= item.indexName }}</td>
            <td>{{= item.columnName }}</td>
            <td>{{= item.nonUnique || '' }}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
    <hr class="layui-border-green">
    <!-- 主键描述 -->
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="200">
            <col width="200">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>主键名称</th>
            <th>主键字段</th>
            <th>主键序列</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.tablesKeysMetaList, function(index, item){ }}
        <tr>
            <td>{{= item.pkName }}</td>
            <td>{{= item.columnName }}</td>
            <td>{{= item.keySeq || '' }}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>

</script>
<script>
    layui.use(function () {
        const laytpl = layui.laytpl;
        const util = layui.util;
        const tree = layui.tree;
        const $ = layui.jquery;

        let treeData = [];

        //树呈现
        tree.render({
            elem: '#div-tree',
            data: treeData,
            showCheckbox: false,
            onlyIconControl: true,
            id: 'tree-id-1',
            isJump: false,
            click: function (obj) {
                const data = obj.data;
                data.tableMeta.tableCount = data.tableCount;
                data.tableMeta.fieldCount = data.fieldCount;
                const DataBaseView = document.getElementById('DataBaseView').innerHTML;
                const view1 = document.getElementById('view1');
                laytpl(DataBaseView).render(data.tableMeta, function (str) {
                    view1.innerHTML = str;
                });
                if (data.field === "database") {
                    $("#showView2").hide();
                } else {
                    const tableView = document.getElementById('tableView').innerHTML;
                    const view2 = document.getElementById('view2');
                    laytpl(tableView).render(data.tableMeta, function (str) {
                        view2.innerHTML = str;
                    });
                    $("#showView2").show();
                }
            }
        });

        /**
         * 加载树形元数据
         * @returns {*[]}
         */
        function loadTreeData() {
            post(ctx + "sqlManager/metaTreeTableList", null, (res) => {
                if (res.code === 200) {
                    treeData = res.data;
                    tree.reload('tree-id-1', {
                        data: res.data
                    });
                }
            })
        }

        // 刷新树
        util.event('lay-on', {
            reload: function () {
                $("#searchInput").val('');
                loadTreeData();
            }
        });
        loadTreeData();

        function filterTree(keyword) {
            var filteredData = [];
            if (keyword === '') {
                filteredData = treeData;
            } else {
                function searchNodes(nodes) {
                    return nodes.reduce((acc, node) => {
                        if (node.title.toLowerCase().includes(keyword.toLowerCase())) {
                            acc.push({...node});
                        } else if (node.children && node.children.length > 0) {
                            const children = searchNodes(node.children);
                            if (children.length > 0) {
                                acc.push({...node, children: children});
                            }
                        }
                        return acc;
                    }, []);
                }

                filteredData = searchNodes(treeData);
            }
            tree.reload('tree-id-1', {data: filteredData});
        }


        // Event listener for search input changes
        $('#searchInput').on('keyup', function () {
            var keyword = $(this).val();
            filterTree(keyword);
        });

    });
</script>
</html>